<!--
 * @Description: myOrderPage-- 我的订单
 * @Author: your name
 * @Date: 2024-05-20
 * @LastEditTime: 2024-05-20
 * @LastEditors: Please set LastEditors
-->

<template>
  <div class="myCourse">
    <div class="left_box">
      <ul class="person_center">
        <div>
          <img
            src="https://www.rongyuejiaoyu.com/static/index/images/account.png"
            alt=""
          />
          我的订单
        </div>
        <li
          :class="{ liactive: active == index }"
          v-for="(item, index) in orderTabs"
          :key="index"
          @click="orderEle(index, item)"
        >
          <a href="javascript:void(0)"> {{ item.name }} </a>
        </li>
      </ul>
    </div>

    <div class="right_con">
      <ul class="header_ul">
        <li class="activeli">全部订单</li>
      </ul>
      <div class="bought_main" v-for="item in orderList" :key="item.id">
        <div class="bac_g">
          <div class="oc_header">
            <span style="flex: 1">订单时间：{{ item.createtime }}</span>
            <span style="flex: 2.5">订单编号：{{ item.order_sn }}</span>
            <span class="dishow">
              <i>{{ item.status_text }}</i>
            </span>
          </div>
          <div
            class="oc_con"
            v-for="item_goods in item.goods_list"
            :key="item_goods.id"
          >
            <div class="buy_info">
              <img :src="item_goods.image" alt="" />
              <div class="buy_lesson">
                <p>
                  <span>{{ item_goods.title }}</span>
                  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                  <small>× {{ item_goods.goods_nums }}</small>
                </p>
                <p>￥{{ item_goods.goods_price }}</p>
              </div>
            </div>
          </div>

          <div class="oc_footer">
            <div class="kefu53">
              <div class="order_t" v-if="item.status == 0">
                订单状态：
                <a
                  :href="`#/pay_combo?id=${item.goods_list[0]?.id}&coupon_id=0`"
                >
                  去付款
                </a>
                <span>取消订单</span>
              </div>
              <p v-else>
                <small class="contact_kefu" @click="contactService">
                  联系客服
                </small>
                <small class="Invoice"> 申请发票 </small>
              </p>
            </div>
            <span>
              总计：
              <strong style="color: #e8433a"> ￥{{ item.total_money }} </strong>
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getOrderType, getOrderList } from '@/api/homes_tabs'

export default {
  name: 'myOrderPage',
  data() {
    return {
      active: 0,
      orderTabs: [],
      orderList: []
    }
  },
  created() {
    this.getTypeList()
  },
  methods: {
    getTypeList() {
      getOrderType().then(({ data: data }) => {
        this.orderTabs = Object.entries(data.data).map(([key, value]) => ({
          key: key,
          name: value
        }))
        this.getOrderData(this.orderTabs[0].key)
      })
    },
    getOrderData(key) {
      let orderParams = {
        page: 1,
        type: key
      }
      getOrderList(orderParams).then(({ data: data }) => {
        this.orderList = data.data.list
      })
    },
    orderEle(i, item) {
      this.active = i
      this.getOrderData(item.key)
    },
    contactService() {
      window.open(
        'https://tb.53kf.com/code/client/a2a882948d9a2eb955e5b2114833baad4/4',
        'windowForBridgeIM',
        'left=500px,top=150px,width=750,height=600,location=no,resizable=yes,status=no,toolbar=no,menubar=no'
      )
    }
  }
}
</script>

<style scoped lang="scss">
@import '@/assets/styles/Order_couse.scss';

.bought_main:last-child {
  padding: 20px !important;
}

.bought_main {
  padding: 20px;
  padding-bottom: 0;

  .bac_g {
    background: #f9fafc;
    border: 1px solid #e5e5e5;
  }
  .oc_header {
    height: 38px;
    line-height: 38px;
    border-bottom: 1px solid #e5e5e5;
    background: #f9fafc;
    padding: 0 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .dishow {
      cursor: pointer;
      font-weight: bold;

      i {
        color: #14a1f2;
      }
    }
  }

  .oc_footer {
    padding: 0 15px;
    height: 38px;
    line-height: 38px;
    background: #f9fafc;
    border-top: 1px solid #e5e5e5;
    font-size: 16px;
    color: #666;
    display: flex;
    align-items: center;
    justify-content: space-between;
    small {
      cursor: pointer;
      margin-right: 8px;
    }

    .kefu53 {
      color: #1974ad;

      .order_t {
        a {
          width: 68px;
          height: 26px;
          line-height: 26px;
          background: #bd0008;
          color: #fff;
          border-radius: 3px;
          display: inline-block;
          text-align: center;
          text-indent: 0;
          margin-right: 20px;
        }
        span {
          color: #5baf5b;
          display: inline-block;
          text-indent: 0px;
          cursor: pointer;
        }
      }
    }
  }

  .oc_con {
    font-size: 14px;

    .buy_lesson {
      p:first-child {
        margin-bottom: 10px;
      }

      p {
        color: #666;
      }
    }

    .buy_info {
      display: flex;
      align-items: center;
      padding: 15px;
      img {
        height: 50px;
        width: 78px;
        display: inline-block;
        margin-right: 12px;
      }
    }
  }
}
</style>
